<template>
	<view>
		<view class="top">
			<u-navbar title="充值统计" :title-size="35" :title-bold="true" title-color="#ffffff" :immersive="true"
				:background="background" back-icon-color="#ffffff" :border-bottom="false"></u-navbar>
		</view>
		<u-select v-model="show" :list="arealist"></u-select>
		<view style="display: flex; width: 90%; height: 20px;margin-top: -100rpx;
		margin-left: 40rpx;justify-content: space-between;align-items: center;">
			<view class="title">铁西区沈辽路</view>
			<view style="display: flex;">
				<view class="shop" @click="show = true">切换门店</view>
				<view style="width: 24rpx; height: 22rpx;">
					<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/16777400650594751651.png"
						style="width: 100%; height: 100%;" />
				</view>
			</view>
		</view>
		<view class="center">
			<view class="center-top">
				<view class="flex-row justify-between group_3">
					<view class="flex-row space-x-50">
						<text class="font_2">会员总数：</text>
						<text class="font_3 text_5">49人</text>
					</view>
					<view class="flex-row group_4 space-x-24">
						<text class="font_2">会员总余额：</text>
						<text class="font_3">3550.14元</text>
					</view>
				</view>
				<view class="flex-row group_5">
					<view class="flex-row shrink-0 space-x-50">
						<text class="font_2">累计充值：</text>
						<text class="font_3">900.00元</text>
					</view>
					<text class="font_2 text_6">累计赠送：</text>
					<text class="font_3 text_7">210.00元</text>
				</view>
			</view>
			<view class="time">
				时间维度
			</view>
			<view class="time-dimension">
				<view class="dimension" :class="timeId === index?'dimension-after':'dimension'"
					v-for="(item,index) in list" @click="timelist(index)">
					<view class="dimension-p">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="time">
				快捷选项
			</view>
			<view class="time-dimension">
				<view class="dimension" :class="quickId === index?'dimension-after':'dimension'"
					v-for="(item,index) in quicklist" @click="quickbtn(index)">
					<view class="dimension-p">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="time">
				自定义选项
			</view>
			<uni-section :title="'日期范围用法：' + '[' + dateRange + ']'" type="line"></uni-section>
			<view class="example-body">
				<uni-datetime-picker v-model="dateRange" type="daterange" @maskClick="maskClick" />
			</view>
			<view class="table">
				<view class="table-shop">日期</view>
				<view class="table-shop1">充值</view>
				<view class="table-shop1">消费</view>
			</view>
			<view class="detail" v-for="item in 4">
				<view class="detail-shop">2011-09-02</view>
				<view class="table-shop1" style="font-size: 24rpx;font-weight: 500;">
					<view style="display: flex;flex-direction: column;">
						<view>充值次数：2次</view>
						<view>充值金额：200.00元</view>
						<view>赠送金额：50.00元</view>
					</view>
				</view>
				<view class="table-shop1" style="font-size: 24rpx;font-weight: 500;">
					<view style="display: flex;flex-direction: column;">
						<view>结账次数：5次</view>
						<view>余额消耗：232.00元</view>
					</view>
				</view>
			</view>


		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dateString: this.getDateTime(new Date()),
				datetimeString: this.getDateTime(new Date()),
				datetimeDefaultValueString: '',
				datetimeDefaultValue: this.getDateTime(Date.now() + 1 * 24 * 3600000),
				dateTimestamp: Date.now(),
				dateInstance: new Date(),
				dateRange: [this.getDate(Date.now() - 5 * 24 * 3600000), this.getDate(Date.now() + 5 * 24 * 3600000)],
				datetimeRange: [this.getDateTime(Date.now() - 5 * 24 * 3600000), this.getDateTime(Date.now() + 5 * 24 *
					3600000)],
				start: Date.now() - 10 * 24 * 3600000,
				end: Date.now() + 10 * 24 * 3600000,
				timeId: '0',
				quickId: '0',
				show: false,
				arealist: [{
						value: '1',
						label: '铁西滑翔店'
					},
					{
						value: '2',
						label: '华强广场店铺'
					}
				],
				quicklist: [{
					name: '昨日'
				}, {
					name: '今日'
				}, {
					name: '自定义'
				}],
				list: [{
					name: '日'
				}, {
					name: '月'
				}, {
					name: '年'
				}]
			}
		},
		watch: {

			dateRange() {
				console.log('日期范围选:', this.dateRange);
			}

		},
		methods: {
			timelist(index) {
				this.timeId = index
				console.log(this.timeId)
			},
			quickbtn(index) {
				this.quickId = index
				console.log('quickId', this.quickId)
			},
			maskClick(e) {
				console.log('----maskClick事件:', e);
			},
			getDateTime(date) {
				return `${this.getDate(date)} ${this.getTime(date)}`
			},
			getDate(date) {
				date = new Date(date)
				const year = date.getFullYear()
				const month = date.getMonth() + 1
				const day = date.getDate()
				return `${year}-${this.addZero(month)}-${this.addZero(day)}`
			},
			getTime(date) {
				date = new Date(date)
				const hour = date.getHours()
				const minute = date.getMinutes()
				const second = date.getSeconds()
				return this.hideSecond ? `${this.addZero(hour)}:${this.addZero(minute)}` :
					`${this.addZero(hour)}:${this.addZero(minute)}:${this.addZero(second)}`
			},
			addZero(num) {
				if (num < 10) {
					num = `0${num}`
				}
				return num
			}
		}
	}
</script>


<style lang="scss">
	html {
		font-size: 16px;
	}

	body {
		margin: 0;
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
			'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	view,
	image,
	text {
		box-sizing: border-box;
		flex-shrink: 0;
	}

	#app {
		width: 100vw;
		height: 100vh;
	}

	.flex-row {
		display: flex;
		flex-direction: row;
	}

	.flex-col {
		display: flex;
		flex-direction: column;
	}

	.justify-start {
		justify-content: flex-start;
	}

	.justify-end {
		justify-content: flex-end;
	}

	.justify-center {
		justify-content: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.justify-around {
		justify-content: space-around;
	}

	.justify-evenly {
		justify-content: space-evenly;
	}

	.items-start {
		align-items: flex-start;
	}

	.items-end {
		align-items: flex-end;
	}

	.items-center {
		align-items: center;
	}

	.items-baseline {
		align-items: baseline;
	}

	.items-stretch {
		align-items: stretch;
	}

	.self-start {
		align-self: flex-start;
	}

	.self-end {
		align-self: flex-end;
	}

	.self-center {
		align-self: center;
	}

	.self-baseline {
		align-self: baseline;
	}

	.self-stretch {
		align-self: stretch;
	}

	.flex-1 {
		flex: 1 1 0%;
	}

	.flex-auto {
		flex: 1 1 auto;
	}

	.grow {
		flex-grow: 1;
	}

	.grow-0 {
		flex-grow: 0;
	}

	.shrink {
		flex-shrink: 1;
	}

	.shrink-0 {
		flex-shrink: 0;
	}

	.relative {
		position: relative;
	}

	.top {
		width: 750rpx;
		height: 307rpx;
		background: #19C865;

	}

	.shop {
		width: 105rpx;
		height: 23rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	/deep/ .uni-datetime-picker--btn {
		background-color: #19C865 !important;
	}

	/deep/ .uni-calendar-item--multiple .uni-calendar-item--before-checked,
	.uni-calendar-item--multiple .uni-calendar-item--after-checked {
		background-color: #19C865 !important;
	}

	/deep/ .uni-calendar-item__weeks-box .uni-calendar-item--checked {
		background-color: #19C865 !important;
	}


	.example-body {
		background-color: #fff;
		padding: 10px;
	}

	.title {
		width: 210rpx;
		height: 31rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
		// margin-top: -100rpx;
		// margin-left: 40rpx;
	}

	.font_1 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 700;
		color: #222222;
	}

	.section_3 {
		margin-top: -36rpx;
		padding: 40rpx 28rpx 369rpx;
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 0 0;
	}

	.text_4 {
		color: #222222;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 29rpx;
	}

	.group_3 {
		margin-top: 29rpx;
	}

	.space-x-50>view:not(:first-child),
	.space-x-50>text:not(:first-child),
	.space-x-50>image:not(:first-child) {
		margin-left: 50rpx;
	}

	.font_2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #6b6b6b;
	}

	.font_3 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 700;
		color: #222222;
	}

	.text_5 {
		line-height: 25rpx;
	}

	.group_4 {
		margin-right: 51rpx;
	}

	.group_5 {
		margin-top: 29rpx;
	}

	.text_6 {
		margin-left: 58rpx;
	}

	.text_7 {
		margin-left: 51rpx;
	}

	.divider {
		margin-right: 3rpx;
		margin-top: 31rpx;
		background-color: #eeeeee;
		height: 1rpx;
	}

	.font_4 {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	.text_8 {
		margin-left: 3rpx;
		margin-top: 28rpx;
		line-height: 27rpx;
	}

	.group_6 {
		margin-top: 30rpx;
	}

	.text-wrapper {
		flex: 1 1 214rpx;
		padding: 20rpx 0;
		background-color: #19c865;
		border-radius: 8rpx;
		height: 64rpx;
		border: solid 1rpx #01bf53;
	}

	.text_9 {
		color: #ffffff;
		line-height: 24rpx;
	}

	.text-wrapper_2 {
		flex: 1 1 214rpx;
		padding: 20rpx 0;
		background-color: #efefef;
		border-radius: 8rpx;
		height: 64rpx;
	}

	.font_5 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 23rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_10 {
		line-height: 24rpx;
	}

	.view {
		margin-right: 3rpx;
	}

	.font_6 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 25rpx;
		font-weight: 500;
		color: #222222;
	}

	.text_11 {
		margin-top: 40rpx;
		line-height: 26rpx;
	}

	.group_7 {
		margin-top: 30rpx;
	}

	.space-x-24>view:not(:first-child),
	.space-x-24>text:not(:first-child),
	.space-x-24>image:not(:first-child) {
		margin-left: 24rpx;
	}

	.text_13 {
		line-height: 24rpx;
	}

	.view_2 {
		margin-right: 3rpx;
	}

	.text_12 {
		color: #ffffff;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 700;
		line-height: 25rpx;
	}

	.text_14 {
		margin-left: 5rpx;
		margin-top: 37rpx;
		font-size: 29rpx;
		line-height: 28rpx;
	}

	.group_8 {
		margin-top: 31rpx;
	}

	.equal-division {
		margin-right: 3rpx;
	}

	.space-x-34>view:not(:first-child),
	.space-x-34>text:not(:first-child),
	.space-x-34>image:not(:first-child) {
		margin-left: 34rpx;
	}

	.equal-division-item {
		padding: 20rpx 19rpx;
		flex: 1 1 328rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		height: 64rpx;
		border: solid 1rpx #dddddd;
	}

	.image_6 {
		width: 26rpx;
		height: 26rpx;
	}

	.pos_3 {
		position: absolute;
		left: 20rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.font_7 {
		font-size: 26rpx;
		font-family: PingFang SC;
		line-height: 20rpx;
		font-weight: 500;
		color: #6b6b6b;
	}

	.equal-division-item_2 {
		padding: 20rpx 0;
		flex: 1 1 328rpx;
		background-color: #ffffff;
		border-radius: 8rpx;
		height: 64rpx;
		border: solid 1rpx #dddddd;
	}

	.section_4 {
		background-color: #cccccc;
		border-radius: 1rpx;
		height: 2rpx;
	}

	.pos_4 {
		position: absolute;
		left: 340rpx;
		right: 342rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.list {
		margin-top: 40rpx;
		padding-left: 4rpx;
	}

	.section_5 {
		padding: 36rpx 30rpx;
		background-color: #f3fcf7;
		border-radius: 16rpx 16rpx 0px 0px;
		border: solid 1rpx #eeeeee;
	}

	.space-x-122>view:not(:first-child),
	.space-x-122>text:not(:first-child),
	.space-x-122>image:not(:first-child) {
		margin-left: 122rpx;
	}

	.text_15 {
		margin-right: 170rpx;
	}

	.table {
		width: 690rpx;
		height: 98rpx;
		background: #F3FCF7;
		border: 1px solid #EEEEEE;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		padding: 20rpx;
	}

	.table-shop {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #222222;
		display: flex;
		flex: 0.27;
	}

	.table-shop1 {
		display: flex;
		flex: 0.4;
		justify-content: center;
	}

	.detail {
		width: 690rpx;
		// height: 108rpx;
		background: #FFFFFF;
		border: 1px solid #EEEEEE;
		margin: auto;
		display: flex;
		align-items: center;
		padding: 20rpx;
		border-top: none;
	}

	.detail-shop {
		display: flex;
		flex: 0.27;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #222222;
	}

	.center {
		width: 750rpx;
		height: 1356rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		margin-top: 40rpx;
		padding-top: 20rpx;

		.center-top {
			width: 730rpx;
			height: 170rpx;
			padding: 20rpx;
			border-bottom: 2rpx solid #e6e6e6;
			margin: auto;
		}

		.time {
			width: 150rpx;
			height: 27rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #222222;
			margin-left: 32rpx;
			margin-top: 20rpx;
		}

		.time-dimension {
			width: 100%;
			height: 50px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;

			.dimension {
				width: 214rpx;
				height: 64rpx;
				background: #EFEFEF;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.dimension-p {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #222222;
				}
			}

			.dimension-after {
				width: 214rpx;
				height: 64rpx;
				background: #01BF53;
				border-radius: 8rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.dimension-p {

					color: #ffffff;
				}
			}
		}
	}
</style>
